import { Button, Form, Input, Modal, Select, Space, Upload } from "antd";
import { useState, useImperativeHandle, forwardRef } from "react";
import api from "../../api";




const CarouseIPageAction = (props, ref) => {
    const [form] = Form.useForm();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [searchMenu, setSearchMenu] = useState([])
    const [fileList, setFileList] = useState([]);



    const getRecipe = async () => {
        const res = await api.searchMenu.getAlladmins()
        if (res.meta.status) {
            setSearchMenu(res.menus)
        }
    }

    const addSwiper=async(data)=>{
        const res= await api.admin.addSwiper(data)
        if (res.code==200) {
            handleCancel()
        }
    }

    const showModal = (item) => {
        if (item) {

        } else {
            form.setFieldValue('open_type', 'navigateTo')
        }
        getRecipe()
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
        form.resetFields();
        setFileList([])
    };

    const onFinish = (values) => {
        const data={...values,image_src:values.image_src?'http://nocat.life:4000/'+values.image_src?.file.response.data:undefined}
        addSwiper(data)
    };
    useImperativeHandle(ref, () => ({
        showModal,
    }));



    ///图片上传
    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };
    return (
        <div>
            <Modal title="Basic Modal" open={isModalOpen} onCancel={handleCancel} footer={false}>
                <Form form={form} labelCol={{ style: { width: 100 } }} onFinish={onFinish} >
                    <Form.Item label="导航地址" name="goods_id" >
                        <Select placeholder='请选择' allowClear options={searchMenu} fieldNames={{ value: '_id', label: 'name' }} />
                    </Form.Item>
                    <Form.Item label="图片" name="image_src" >
                        <Upload
                            name='imgSrc'
                            action="/api/admin/fileUpload"
                            listType="picture-card"
                            fileList={fileList}
                            onChange={onChange}
                        >
                            {fileList.length < 1 && '+ Upload'}
                        </Upload>
                    </Form.Item>
                    <Form.Item label="导航地址" name="navigator_url" >
                        <Input placeholder='请输入' allowClear />
                    </Form.Item>
                    <Form.Item label="跳转方式" name="open_type" >
                        <Input placeholder='navigateTo' allowClear />
                    </Form.Item>
                    <div style={{ textAlign: 'right', }} >
                        <Space size="small">
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button onClick={handleCancel}>
                                取消
                            </Button>
                        </Space>
                    </div>
                </Form>
            </Modal>
        </div >
    )
}

export default forwardRef(CarouseIPageAction);